import React from 'react';
import ReactDOM from 'react-dom/client';
import "./App.css";
import Detail from './detail';
import List from './List';

class App extends React.Component {
	constructor() {
		super();
        this.state = {
            isShowList:true,
            id:""
        }
	}
    //状态提升
    showDetail = (id) => {
        this.setState({
            id,
            isShowList:false
        })
    }
    //rander执行两次，初始执行一次，获取数据后再执行一次
    render() {
        const {isShowList,id} = this.state;
		return <div>
            {
                isShowList
                ? <List showDetail={this.showDetail}/>//传一个函数，可以实现子组件向父组件传递数据
                : <Detail id={id}/>
            }
            
        </div>
	}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
